<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <meta charset="UTF-8">
    <title>登录</title>
    <script src="js/bootstrap.bundle.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.validate.min.js"></script>
    <script src="js/messages_zh.js"></script>
    <script>
     //键盘按下并释放及提交后验证提交表单

            $().ready(function (){
                $("#loginForm").validate({
                    // 规则
                    rules: {
                        pswd: {
                            //必填
                            required: true,
                            minlength: 6
                        },
                        uname: { // 这里添加了花括号来保持格式一致
                            required: true
                        },
                        optradio: { // 通常单选按钮组不需要 minLength，但需要确保至少选中一个
                            required: true
                        },
                        remember: {
                            required: true
                        }
                            },
                            //错误提示信息
                            messages: {
                                pswd: {
                                    required: "请输入你的密码",
                                    minlength: "密码至少是6位"
                                },
                                uname: "请输入你的账号或邮箱或用户名",
                                remember: "请同意协议后登录",
                                optradio: "其选择登录类型"
                            }
                        });
                //事件监听事件
                $("#loginForm").on("submit", function(event) {
                    // 调用 .valid() 方法进行验证
                    if (!$(this).valid()) {
                        // 如果验证失败，阻止表单提交
                        event.preventDefault();
                    }
                });
            });
    </script>
    <style>
        .error {
            color: red;
        }
    </style>
</head>
<body>
<div class="container-fluid mt-3 d-flex">
    <div class="card w-25 d-flex m-auto bg-light">
        <div class="card-img-top d-flex"><img class="m-auto" src="img/user.png"></div>
        <div class="card-title  d-flex m-auto ">登录</div>
        <form action="login" name="loginForm" class="m-auto" id="loginForm" method="post">
            <div class="form-group">
                <label for="uname">用户名/邮箱/手机号</label>
                <input type="text" class="form-control" id="uname" placeholder="三者选其一" name="uname">
            </div>
            <div class="form-group">
                <label for="pwd">密码</label>
                <input type="password" class="form-control" id="pwd" placeholder="密码" name="pswd">
            </div>
            <div class="form-check">
                <input type="radio" class="form-check-input" id="radio1" name="optradio" value="user" checked>用户
                <label class="form-check-label" for="radio1"></label>
            </div>
            <div class="form-check">
                <input type="radio" class="form-check-input" id="radio2" name="optradio" value="admin">管理员
                <label class="form-check-label" for="radio2"></label>
            </div>
            <div class="form-group form-check">
                <label class="form-check-label">
                    <input class="form-check-input" type="checkbox" name="remember"> 同意协议
                </label>
            </div>
            <button  type="submit" class="btn btn-primary">登录</button>
            <a class="btn btn-danger" href="signup.jsp">没有账号注册一个</a>
        </form>

    </div>
</div>
</body>

</html>